Class 2 Lecture Demo

Class 2 Agenda:

• Link to Agenda

Class 2 Demonstration Labs:

• Lecture Demo 1 - CartoCSS setup
• Lecture Demo 2 - CartoCSS Zoom Conditions
• Lecture Demo 3 - CartoCSS Attribute Conditions
• Lecture Demo 4 - CartoCSS ramps

Lecture Demo 1: Orient to CARTO; setup for CartoCSS

• Download Class 2 inclass data located for direct download HERE.

VIIRS Fire Points

• Access and Open the CartoCSS documentation HERE. An advanced CartoCSS document is located HERE.

• Unzip the inclass data, then upload the fires-sa-viirs.geojson data to your own Carto account. This data was accessed January 25, 2021 from NASA EarthData.

• Make a map with the fire data and style the points with no aggregation (under Style > Aggregation, Points should be selected).

Default Style prior to CartoCSS styling

• Next, access CartoCSS at bottom right of style interface, and change the #layer properties as follows:
  • Make the markers 5 pixels wide.
  • Give the markers an outline 2 pixels wide.
  • Give the fill and stroke of the markers different colors.

CartoCSS applied to #layer for VIIRS Fire Points

Lecture Demo 2 - CartoCSS Zoom Conditions

• Next, utilizing the previous styled CartoCSS instance, now turn to enacting Zoom Conditions for the layer

• First, we will keep the current styling as default, but add in one Zoom Level Condition as follows:

  • When the zoom level is 8 or more, make the markers 10 pixels wide:

[zoom >= 10] {
  marker-width: 40;
  }
  

When the zoom level is 12 or more, make the markers 15 pixels wide.

• Second, we will create a second condition, When the zoom level is 14 or more, make the markers a green color for the fill:

[zoom >= 12] {
  marker-fill: green;
  }
  

Zoom Condition #2 Applied

Note: CartoCSS is ‘order dependent’ meaning the order of the conditions is respected, i.e. what comes first is enacted first, what comes second, is enacted second, and so forth.

Lecture Demo 3 - CartoCSS Attribute Conditions

• Following the Zoom Conditions above, next we’ll turn to attribute-based conditions. The column bright_ti4 represents the following, with values in the dataset ranging 208 - 367 :

• VIIRS I-4 channel brightness temperature of the fire pixel measured in Kelvin.

• For those points whose brightness is greater than 350, we will change those to red with a default color of black. We will also make the default marker-width 5 and the condition marker-width enlarged at 10:

 [bright_ti4 >= 350]{
  marker-width: 10;
  marker-fill: red;
  marker-fill-opacity: 1.0;
  }
  

Attribute-based Conditions Applied

Lecture Demo 4 - CartoCSS ramps

• Using the carto-colors documentation, we will apply a custom color scheme to the bright_ti4 variable of the Fire Points dataset.

• First, we will clear out the previous CartoCSS, and then switch to a classification ramp for the Fire Points fill colorization:

• Use jenks method

• Apply to the the bright_ti4 column

• Choose the green-to-blue colorbrewer ramp:

marker-fill: ramp([bright_ti4], cartocolor(Temps), jenks);

To accent the color ramp, the following complete #layer CartoCSS can be used:

#layer {
  marker-width: 10;
  marker-fill: ramp([bright_ti4], cartocolor(Temps), jenks);
  marker-fill-opacity: 0.9;
  marker-allow-overlap: true;
  marker-line-width: .5;
  marker-line-color: black;
  marker-line-opacity: 1;
}

Color Ramp Applied